<div class="auth-main">
    <div class="auth-block">
        <h1>CrowdSourcing</h1>
        <a [routerLink]="['/login']" class="auth-link">Already have a CrowdSourcing account? Sign in!</a>

        <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
            <div class="form-group row"
                 [ngClass]="{'has-error': (!form.get('name').valid && form.get('name').touched), 'has-success': (form.get('name').valid && form.get('name').touched)}">
                <label for="inputName3" class="col-sm-2 col-xs-2 control-label custom-width-10 input-label">
                    <i _ngcontent-tcq-7="" class="fa fa-user fa-2x"
                       style="color: #000;padding-left: 15px;position: relative;top: 5px;"></i>
                </label>

                <div class="col-sm-10 col-xs-10">
                    <input formControlName="name" type="text" class="form-control" id="inputName3"
                           placeholder="Full Name">
                </div>
            </div>
            <div class="form-group row"
                 [ngClass]="{'has-error': (!form.get('email').valid && form.get('email').touched), 'has-success': (form.get('email').valid && form.get('email').touched)}">
                <label for="inputEmail3" class="col-sm-2 col-xs-2 control-label custom-width-10 input-label">
                    <i _ngcontent-tcq-7="" class="fa fa-envelope fa-2x"
                       style="color: #000;padding-left: 15px;position: relative;top: 5px;"></i>
                </label>

                <div class="col-sm-10 col-xs-10">
                    <input formControlName="email" type="email" class="form-control" id="inputEmail3" placeholder="Email">
                </div>
            </div>
          <div formGroupName="passwords">
            <div class="form-group row"
                 [ngClass]="{'has-error': (!form.get('passwords').get('password').valid && form.get('passwords').get('password').touched), 'has-success': (form.get('passwords').get('password').valid && form.get('passwords').get('password').touched)}">
                <label for="inputPassword3" class="col-sm-2 col-xs-2 control-label custom-width-10 input-label">
                    <i _ngcontent-tcq-7="" class="fa fa-key fa-2x"
                       style="color: #000;padding-left: 15px;position: relative;top: 5px;"></i>
                </label>

                <div class="col-sm-10 col-xs-10">
                    <input formControlName="password" type="password" class="form-control" id="inputPassword3"
                           placeholder="Password">
                </div>
            </div>
            <div class="form-group row"
                 [ngClass]="{'has-error': (!form.get('passwords').get('repeatPassword').valid && form.get('passwords').get('repeatPassword').touched), 'has-success': (form.get('passwords').get('repeatPassword').valid && form.get('passwords').get('repeatPassword').touched)}">
                <label for="inputPassword4" class="col-sm-2 col-xs-2 control-label custom-width-10 input-label"><i
                        _ngcontent-tcq-7="" class="fa fa-key fa-2x"
                        style="color: #000;padding-left: 15px;position: relative;top: 5px;"></i></label>

                <div class="col-sm-10 col-xs-10">
                    <input formControlName="repeatPassword" type="password" class="form-control" id="inputPassword4"
                           placeholder="Repeat Password">
                    <span *ngIf="!form.get('passwords').valid && (form.get('passwords').get('password').touched || form.get('passwords').get('repeatPassword').touched)"
                          class="help-block sub-little-text">Passwords don't match.</span>
                </div>
            </div>
          </div>
            <div class="form-group row">
                <label for="inputName3" class="col-sm-2 col-xs-2 control-label custom-width-10 input-label">
                    <i _ngcontent-tcq-7="" class="fa fa-user fa-2x"
                       style="color: #000;padding-left: 15px;position: relative;top: 5px;"></i>
                </label>

                <div class="col-sm-10 col-xs-10 addRadio">

                <span class="radioButton1">
                <input type="radio" name="gender" id="inlineRadio1" value="Male" formControlName="gender">
                </span>
                    <span class="radioButton">Male</span>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
               <span class="radioButton1">
                <input type="radio" name="gender" id="inlineRadio2" value="Female" formControlName="gender">
               </span>
                    <span class="radioButton">Female</span>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-offset-2 col-sm-10 custom-offset-10 custom-sigin">
                    <button [disabled]="!form.valid || submitted" type="submit" class="btn btn-default btn-auth lgn">
                        Sign up
                    </button>
                </div>
            </div>
        </form>

        <div class="auth-sep">
      <span>
        <span>or Sign up with one click</span>
      </span>
      <span style="width: 15%;padding: 0 0px;">
        <i class="socicon socicon-facebook" (click)="onFacebookLoginClick()" title="Sign Up with Facebook"
           style="width: 2.2em;line-height: 2.3;color: #fff;right: 20px;"></i>
      </span>
        </div>
    </div>
</div>
